﻿<script type="text/javascript">
    var AuctionModel = {
        bid: {
            Id: ko.observable(),
            Caption: ko.observable(),
            Description: ko.observable(),
            Price: ko.observable()
        },
        Auction: {
            Id: ko.observable(),
            Caption: ko.observable(),
            Description: ko.observable(),
            Price: ko.observable()
        },
        auctions: ko.observableArray([]),

        newAuction: function () {
            this.Auction.Id = guidGenerator();

            $.mobile.changePage("#confirmcreate");
        },
        add: function (auction) {
            this.auctions.push(auction);
        },
        find: function (query) {
            // not yet implemented
        },

        placeBid: function () {
            $.mobile.changePage("#latest");
        },
        show: function (auction) {

            this.bid.Id(auction.Id);
            this.bid.Caption(auction.Caption);
            this.bid.Description(auction.Description);
            this.bid.Price(auction.Price);
            $.mobile.changePage("#details");
        }
    };

    var Auction = function(id, caption, description, price) {
        this.Id = id;
        this.Caption = caption;
        this.Description = description;
        this.Price = price;
    };
    
    function guidGenerator() {
        return 1;
    }

    $(function () {

        // Add some sample auctions
        AuctionModel.add(new Auction(1, "XBox", "This is a test", 1200));
        AuctionModel.add(new Auction(2, "Playstation 2", "This is a test", 500));
        AuctionModel.add(new Auction(3, "Volvo v40", "This is a test", 4000));
        AuctionModel.add(new Auction(4, "Summer house", "This is a test", 10000));

        ko.applyBindings(AuctionModel);
    });
</script>

<div data-role="page">
    <div data-role="header" data-position="fixed">        
        <h1>
            KnockoutAuction</h1>
    </div>
    <div data-role="content">
        <p style="text-align: center">
            Welcome to this XSockets.NET show case using jQueryMobile and KnockoutJS - two utterly
            good frameworks
        </p>
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Menu</li>
            <li><a href="#latest">
                <h2>
                    Latest auctions</h2>
                <p>
                    Show the 15 latest crazy auctions</p>
            </a></li>
            <li><a href="#search">
                <h2>
                    Find</h2>
                <p>
                   Find things you never thought existed...</p>
            </a></li>
            <li><a href="#create">
                <h2>
                    Create a new auction</h2>
                <p>
                   Sell ??your surplus stuff...</p>
            </a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>

<div data-role="page" id="latest">
    <div data-role="header" data-position="fixed">
       <a href="//" data-icon="back">Home</a>

        <h1>
            Latest auctions</h1>
    </div>
    <div data-role="content">
        <ul data-bind="foreach: auctions" id="listofauctions" data-role="listview" data-inset="true">
        <li>
        <a data-bind="click:function() { auctionModel.show($data) }">
        <h2 data-bind="text: Caption"></h2>
        <p data-bind="attr: { auctionid: Id }"><strong>Latest bid:<span data-bind="text: Price" class="bid"></span></strong></p>
        <p data-bind="text: Description">        
        </p>
        </a>
       
    </li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>

<div data-role="page" id="create">
    <div data-role="header" data-position="fixed">
        <a href="/" data-icon="back">Home</a>
        <h1>
            Create</h1>
        <a href="#" data-icon="check" data-bind="click: newAuction">Save</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="caption">
                Caption:</label>
            <input type="text" id="caption" name="caption" data-bind="value: auction.Caption, valueUpdate: 'afterkeydown'" />
        </div>
        <div data-role="fieldcontain">
            <label for="description">
                Description:</label>
            <input type="text" id="description" name="description" data-bind="value: auction.Description, valueUpdate: 'afterkeydown'" />
        </div>
        <div data-role="fieldcontain">
            <label for="price">
                Price:</label>
            <input type="number" id="price" name="price" data-bind="value: auction.Price, alueUpdate: 'afterkeydown'" />
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>

<div data-role="page" id="details">
    <div data-role="header" data-position="fixed">
    <a href="#latest" data-icon="back">Back</a>
        <h1 data-bind="text: bid.Caption">
            </h1>
        <a href="#" data-icon="check" data-bind="click: placeBid">Place bid</a>
    </div>
    <div data-role="content">
        <h2 data-bind="text: bid.Caption"></h2>
        <p data-bind="text: bid.Description">
        
        </p>

        <p data-bind="attr: { auctionid: bid.Id }"><strong>Current bid:<span data-bind="text: bid.Price" class="bid"></span></strong></p>

        <div data-role="fielcontain">
            <label for="bid">
                Your bid:</label>
            <input type="number" data-bind="value: bid.Price" />
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h2>
           Team XSockets.NET 2011
        </h2>
    </div>
</div>